<template>
  <div
    class="app-container flex1 flex-col over-hidden purchase-order-statement"
  >
    <el-form class="flex-shrink-0">
      <el-form
        class="flex-shrink-0"
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="采购日期" prop="date">
              <el-date-picker
                v-model="queryParams.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 300px"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划编号" prop="planCode">
              <el-input
                v-model="queryParams.planCode"
                placeholder="请输入计划编号"
                clearable
                size="small"
                style="width: 300px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划名称" prop="planName">
              <el-input
                v-model="queryParams.propertyValue"
                placeholder="请输入计划名称"
                clearable
                size="small"
                style="width: 300px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="供应商" prop="supplier">
              <el-select
                v-model="queryParams.supplier"
                placeholder="请选择供应商"
                clearable
                size="small"
                style="width: 300px"
              >
                <el-option
                  v-for="status in supplierArr"
                  :key="status.dictValue"
                  :label="status.dictLabel"
                  :value="status.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购商" prop="buyer">
              <el-select
                v-model="queryParams.buyer"
                placeholder="请选择采购商"
                clearable
                size="small"
                style="width: 300px"
              >
                <el-option
                  v-for="status in buyerArr"
                  :key="status.dictValue"
                  :label="status.dictLabel"
                  :value="status.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品名称" prop="productName">
              <el-input
                v-model="queryParams.productName"
                placeholder="请输入商品名称"
                clearable
                size="small"
                style="width: 300px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            查询
          </el-button>
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery('queryForm')"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-form>

    <div class="flex-shrink-0 opt-btn">
      <el-button type="primary" size="small" @click="handleExport">
        导出
      </el-button>
    </div>
    <!-- 剩余空间通过 flex1 全部分给表格，over-hidden 必须使用 -->
    <div class="flex1 over-hidden">
      <el-table
        :data="tableData"
        height="100%"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        ref="multipleTable"
      >
        <el-table-column
          align="center"
          label="统计日期"
          prop="date"
        ></el-table-column>
        <el-table-column
          align="center"
          label="计划编号"
          prop="planCode"
        ></el-table-column>
        <el-table-column
          align="center"
          label="计划名称"
          prop="planName"
        ></el-table-column>
        <el-table-column
          align="center"
          label="采购商"
          prop="buyer"
        ></el-table-column>
        <el-table-column
          align="center"
          label="供应商"
          prop="supplier"
        ></el-table-column>
        <el-table-column
          align="center"
          label="采购日期"
          prop="buyDate"
        ></el-table-column>
        <el-table-column
          align="center"
          label="商品名称"
          prop="productName"
        ></el-table-column>
        <el-table-column
          align="center"
          label="产地"
          prop="origin"
        ></el-table-column>
        <el-table-column
          align="center"
          label="牌号"
          prop="number"
        ></el-table-column>
        <el-table-column
          align="center"
          label="规格"
          prop="specification"
        ></el-table-column>
        <el-table-column
          align="center"
          label="数量"
          prop="count"
        ></el-table-column>
        <el-table-column
          align="center"
          label="件数"
          prop="unitCount"
        ></el-table-column>
        <el-table-column
          align="center"
          label="采购价"
          prop="buyPrice"
        ></el-table-column>
        <el-table-column
          align="center"
          label="销售价"
          prop="sellPrice"
        ></el-table-column>
      </el-table>
    </div>

    <el-pagination
      class="text-center bgfff pd10 flex-shrink-0"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size.sync="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { tableMixin } from "@/mixins/index";
import { utils } from "@/utils/utils";
export default {
  mixins: [tableMixin],
  data() {
    return {
      total: 1,
      headerName:['统计日期','计划编号','计划名称','采购商','供应商','采购日期','商品名称','产地','牌号','规格','数量','件数','采购价','销售价'],
      headerList:['date','planCode','planName','buyer','supplier','buyDate','productName','origin','number','specification','count','unitCount', 'buyPrice','sellPrice'],
      tableData: [
          {
              date: '2022-04-12',
              planCode: 'jh00002',
              planName: '0411采购计划',
              buyer: '01',
              supplier: '01',
              buyDate: '2022-04-20',
              productName: "24钢材",
              origin: '深圳',
              number: '0001',
              specification: '500ml/支',
              count: 520,
              unitCount: '10件',
              buyPrice: 1000,
              sellPrice: 200
          },
          {
              date: '2022-05-11',
              planCode: 'jh00001',
              planName: '0411采购计划',
              buyer: '02',
              supplier: '02',
              buyDate: '2022-04-20',
              productName: "刚子",
              origin: '上海',
              number: '0002',
              specification: '500ml/支',
              count: 120,
              unitCount: '10件',
              buyPrice: 800,
              sellPrice: 350
          },
          {
              date: '2022-04-13',
              planCode: 'jh00003',
              planName: '0411采购计划',
              buyer: '03',
              supplier: '03',
              buyDate: '2022-04-20',
              productName: "钢铁合剂",
              origin: '北京',
              number: '0001',
              specification: '500ml/支',
              count: 120,
              unitCount: '10件',
              buyPrice: 500,
              sellPrice: 800
          }
          ,
          {
              date: '2022-04-11',
              planCode: 'jh00001',
              planName: '0411采购计划',
              buyer: '01',
              supplier: '01',
              buyDate: '2022-04-20',
              productName: "钢铁合剂",
              origin: '成都',
              number: '0001',
              specification: '500ml/支',
              count: 120,
              unitCount: '10件',
              buyPrice: 500,
              sellPrice: 800
          }
          ,
          {
              date: '2022-04-11',
              planCode: 'jh00001',
              planName: '0411采购计划',
              buyer: '01',
              supplier: '01',
              buyDate: '2022-04-20',
              productName: "钢铁合剂",
              origin: '攀枝花',
              number: '0001',
              specification: '500ml/支',
              count: 120,
              unitCount: '10件',
              buyPrice: 500,
              sellPrice: 800
          }
          ,
          {
              date: '2022-04-11',
              planCode: 'jh00001',
              planName: '0411采购计划',
              buyer: '01',
              supplier: '01',
              buyDate: '2022-04-20',
              productName: "钢铁合剂",
              origin: '武汉',
              number: '0001',
              specification: '500ml/支',
              count: 120,
              unitCount: '10件',
              buyPrice: 500,
              sellPrice: 800
          }
          ,
          {
              date: '2022-04-11',
              planCode: 'jh00001',
              planName: '0411采购计划',
              buyer: '01',
              supplier: '01',
              buyDate: '2022-04-20',
              productName: "钢铁合剂",
              origin: '东莞',
              number: '0001',
              specification: '500ml/支',
              count: 120,
              unitCount: '10件',
              buyPrice: 500,
              sellPrice: 800
          }
          ,
          {
              date: '2022-04-11',
              planCode: 'jh00001',
              planName: '0411采购计划',
              buyer: '01',
              supplier: '01',
              buyDate: '2022-04-20',
              productName: "钢铁合剂",
              origin: '福建',
              number: '0001',
              specification: '500ml/支',
              count: 120,
              unitCount: '10件',
              buyPrice: 500,
              sellPrice: 800
          }
          ,
          {
              date: '2022-04-11',
              planCode: 'jh00001',
              planName: '0411采购计划',
              buyer: '01',
              supplier: '01',
              buyDate: '2022-04-20',
              productName: "钢铁合剂",
              origin: '天津',
              number: '0001',
              specification: '500ml/支',
              count: 120,
              unitCount: '10件',
              buyPrice: 500,
              sellPrice: 800
          }
      ],
      loading: false,
      supplierArr: [
        {
          dictValue: "01",
          dictLabel: "深圳一飞冲天有限公司",
        },
        {
          dictValue: "02",
          dictLabel: "深圳牛气冲冲有限公司",
        },
      ],
      buyerArr: [
        {
          dictValue: "01",
          dictLabel: "深圳市迅捷钢材有限公司",
        },
        {
          dictValue: "02",
          dictLabel: "深圳市牛气钢材有限公司",
        },
      ],
      queryParams: {
        companyName: "",
        societyCode: "",
        status: "",
      },
      dialogVisible: false,
      isAdd: true,
      updateParams: {
        propCode: "",
        propName: "",
        propValue: "",
        propSort: "",
      },
      updateRules: {
        propCode: [
          {
            required: true,
            trigger: ["change"],
            message: "请输入属性编号！",
          },
        ],
        propName: [
          {
            required: true,
            trigger: ["change"],
            message: "请输入属性名称！",
          },
        ],
        propValue: [
          {
            required: true,
            trigger: ["change"],
            message: "请输入属性值！",
          },
        ],
        propSort: [
          {
            required: true,
            trigger: ["change"],
            message: "请输入属性排序！",
          },
        ],
      },
    };
  },
  created() {},
  computed: {
    // tableData() {
    //   return this.$store.state.products.propertyList;
    // },
  },
  methods: {
    getList() {},
    handleExport() {
      // 导出
      utils.exportExcel(this.headerName,this.headerList,this.tableData,'采购订单报表');
    },
    handleEdit(propertyCode) {
      this.isAdd = false;
      this.updateParams = this.tableData.filter(
        (item) => item.propCode === propertyCode
      )[0];
      this.dialogVisible = true;
    },
    handleDelete(propertyCode) {
      this.$alert("确定删除该条商品属性吗？", "删除商品属性", {
        confirmButtonText: "确定",
        callback: () => {
          const currentIndex = this.tableData.findIndex(
            (item) => item.propCode === propertyCode
          );
          this.tableData.splice(currentIndex, 1);
          this.msgSuccess("删除成功！");
        },
      });
    },
    handleUpdateConfirm() {
      const { propCode } = this.updateParams;
      const repeatFlag = this.tableData.some(
        (item) => item.propCode === propCode
      );
      if (repeatFlag && this.isAdd) {
        this.msgError("属性编号已存在，请重新输入!");
      } else {
        this.$refs.updateForm.validate((value) => {
          if (value) {
            this.msgSuccess("操作成功！");
            console.log(this.updateParams);
            const updateList = this.isAdd
              ? [...this.tableData, { ...this.updateParams }]
              : [...this.tableData];
            this.tableData = updateList;
            this.$store.commit("update_propertyList", updateList);
            this.handleCancel();
          }
        });
      }
    },
    handleCancel() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.purchase-order-statement {
  height: 100%;
  .opt-btn {
    padding: 20px;
  }
  .update-btn {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
